<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换的练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 200px;
            margin: 20px auto;
            padding: 10px;
            background-color: rgb(44, 255, 185);
            /*设置文字居中*/
            text-align: center;
        }
        #outer img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <p id="num">一共 5 张图片，当前第 1 张</p>
        <img src="/images/01.jpg" alt="">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>
<script>
    /*
        点击按钮切换图片
    */

    // 获取两个按钮
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var p =  document.getElementById("num");
    
    /*
        要切换图片就是要修改img标签的src属性
    */
    // 获取img标签
    var img = document.getElementsByTagName("img");


    // 课程方法 ⭐
    // 创建一个数组，用来保存图片的路径
    var imgary = ["/images/01.jpg","/images/02.jpg","/images/03.jpg","/images/04.jpg","/images/05.jpg"];

    // 创建一个变量，来保存当前正在显示的图片的索引
    var i=0;

    // 分别为两个按钮绑定单击响应函数
    prev.onclick = function(){
        
        // 切换到上一张，索引自减
        i--;

        // 判断索引是否为 0 ，如果是，则停止切换
        if(i<0){
            i=imgary.length-1;
        }
        img[0].src=imgary[i];
        // 设置图片张数
        p.innerHTML="一共 "+imgary.length+" 张图片，当前第"+(i+1)+"张";
    }
    
    next.onclick = function(){ 

        // 切换到下一张，索引自增
        i++; 
        // 判断索引是否为 4 ，如果是，则停止切换
        if(i>imgary.length-1){
            i=0;
        }
        img[0].src=imgary[i]; 
        // 设置图片张数
        p.innerHTML="一共 "+imgary.length+" 张图片，当前第"+(i+1)+"张";
    }
    
    
/*
    // 自研方法
    // 创建一个数组，用来保存图片的路径
    var imgary = ["/images/01.jpg","/images/02.jpg","/images/03.jpg","/images/04.jpg","/images/05.jpg"];
    var i=0;
    prev.onclick=function(){
        i--;
        if(i< 1){
            i=4;
        }
        img[0].src=imgary[i];
    }
    
    next.onclick=function(){ 
        i++; 
        if(i > 4){
            i=0;
        }
        img[0].src=imgary[i];
        
        
    }
    setInterval(next.onclick,140);

    //  或将next替换成下面这个，
    /*
        var i="0";
        next.onclick=function(){
            i++;
            img[0].src="/images/0"+i+".jpg";
            if(i>4){
                i=0;
            }
        }
    */
    // setInterval(next.onclick,140);
   
</script>